<template>
    <div>
        <div><i class="el-icon-star-on"></i>基础信息</div>
        <!-- <div class="flex">
            <div class="imgbox mt20">
                <img :src="ListData.headImg | formatImg" alt="">
                
            </div> -->
        <div class="flex3">
            <r-list :ColsNum="3" :width="120" :ListCols="ListCols" ListType="Info" :ListData="ListData"></r-list>
        </div>
        <!-- </div>  -->
        <div class="flex_aj sb mt60 ">
            <div class="pw40 ">
                <div class="mtb20 "><i class="el-icon-star-on"></i>设备信息</div>
                <r-table :tableData="tableDataShebei" :tableCols="tableColsShebei" :height="100"></r-table>
            </div>
            <div class="pw40">
                <div class="mtb20"><i class="el-icon-star-on"></i>下属信息</div>
                <r-table :tableData="tableDataXiashu" :tableCols="tableColsXiashu" :height="100"></r-table>
            </div>
        </div>
        <div class="mt20"><i class="el-icon-star-on"></i>订单分成比例</div>
        <r-list :ColsNum="4" :ListCols="ListColsFencheng" ListType="Info" :ListData="ListDataFencheng"></r-list>
        <div class="mt20"><i class="el-icon-star-on"></i>财务信息</div>
        <r-list :ColsNum="4" :ListCols="ListColsCaiwu" ListType="Info" :ListData="ListDataCaiwu"></r-list>

        <div><i class="el-icon-star-on mt60 mb20"></i>提现信息</div>
        <ListTakecash />
    </div>
</template>
<script>
import ListTakecash from './ListTakecash.vue'
// import ListFocus from './ListFocus.vue'
// import ListClear from './ListClear.vue'
export default {
    data() {
        return {
            //基础信息
            ListCols: [
                [
                    // {
                    //     label: 'headImg',
                    //     prop: 'headImg',
                    //     hiddenHead: true
                    // },
                    {
                        label: '代理商名称',
                        prop: 'name',
                    },
                    {
                        label: '登录账号',
                        prop: 'account',
                    },
                    {
                        label: '联系方式',
                        prop: 'phone',
                    },
                    {
                        label: '账号状态',
                        prop: 'state',
                        formatter: e => e.state == 1 ? '启用' : e.state == 2 ? '禁用' : ''
                    },
                    {
                        label: '经度',
                        prop: 'longitude',
                    },
                    {
                        label: '纬度',
                        prop: 'latitude',
                    },
                    {
                        label: '注册时间',
                        prop: 'createdTime',
                    },
                    {
                        label: '地址',
                        prop: 'address',
                    },
                    {
                        label: '',
                        prop: '',
                    },
                ]
            ],
            ListData: {
                orderId: 1,
                headImg: '',
                orderStatus: '',
                userName: '',
                userPhone: '',
                payType: '',
                payMoney: '',
                payTime: '',
                deviceId: '',
                deviceType: '',
                agent: '',
                shop: '',
                openTime: '',
                closeTime: ''
            },
            //订单分成利润
            ListDataFencheng: {
                proportion: 0,
                proportion3: 0,
                proportion4: '0'
            },
            //订单分成利润信息
            ListColsFencheng: [
                [
                    {
                        label: '称重柜分成比例',
                        prop: 'proportion',
                        formatter: e => e.proportion == 0 ? '0' : e.proportion
                    },
                    {
                        label: '售袋分成比例',
                        prop: 'proportion3',
                        formatter: e => e.proportion3 == 0 ? '0' : e.proportion
                    },
                    {
                        label: '售卡分成比例',
                        prop: 'proportion4',
                        formatter: e => e.proportion4 == 0 ? '0' : e.proportion
                    },

                ]
            ],
            //财务数据
            ListDataCaiwu: {

            },
            //财务信息
            ListColsCaiwu: [
                [
                    {
                        label: '总收益',
                        prop: 'totalRevenue'
                        // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                    },
                    {
                        label: '销售总额',
                        prop: 'servePic',
                    },
                    {
                        label: '生鲜柜销售额',
                        prop: 'cTime'
                    },
                    {
                        label: '组合柜销售额',
                        prop: 'serveStatus'
                    },
                    {
                        label: '可提余额',
                        prop: 'withdrawMoney'
                    },
                    {
                        label: '总订单数量',
                        prop: 'serveStatus'
                    },
                    {
                        label: '生鲜柜订单数',
                        prop: 'serveStatus'
                    },
                    {
                        label: '组合柜订单数量',
                        prop: 'serveStatus'
                    },
                ]
            ],
            // 设备数据
            tableDataShebei: [
                {
                },
            ],
            // 设备信息
            tableColsShebei: [
                {
                    label: '设备类型',
                    prop: 'deveceType',
                },
                {
                    label: '设备数量',
                    prop: 'deviceNum'
                },
            ],
            // 下属数据
            tableDataXiashu: [
                {
                    wordOrder: '123',
                    orderNum: '123',
                },
            ],
            // 下属信息
            tableColsXiashu: [
                {
                    label: '下属类型',
                    prop: 'belongType',
                },
                {
                    label: '数量',
                    prop: 'belongNum'
                },
            ],
        };
    },
    components: {
        ListTakecash
        // ListFocus,
        // ListClear
    },
    computed: {},
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            let res = await this.api.getreginfo(this.$route.query.id)
            if (res) {
                this.ListData = res.data.regionalAgent
                this.ListDataFencheng = res.data.regionalAgent
                // this.ListDataCaiwu = { ...res.data.composeBoxOrder, ...res.data.shopOrder, ...res.data.order }
                this.ListDataCaiwu = {
                    totalRevenue: res.data.regionalAgent.totalRevenue,
                    servePic: res.data.order.totalMoney + res.data.composeBoxOrder.totalMoney,
                    cTime: res.data.order.totalMoney,
                    serveStatus: res.data.composeBoxOrder.totalMoney,
                    withdrawMoney: res.data.regionalAgent.withdrawMoney,
                    serveStatus2: res.data.order.totalCount + res.data.composeBoxOrder.totalCount,
                    serveStatus3: res.data.order.totalCount,
                    serveStatus4: res.data.composeBoxOrder.totalCount,
                }
                this.tableDataShebei = [
                    {
                        deveceType: '自提柜',
                        deviceNum: res.data.expressBoxNums
                    },
                    {
                        deveceType: '生鲜柜',
                        deviceNum: res.data.equipmentNums
                    },
                    {
                        deveceType: '组合柜',
                        deviceNum: res.data.composeBoxNums
                    },
                ],
                    this.tableDataXiashu = [
                        {
                            belongType: '商家',
                            belongNum: res.data.regionalAgent.mchNum
                        },
                        {
                            belongType: '补货员',
                            belongNum: res.data.regionalAgent.staffNum
                        },
                        {
                            belongType: '',
                            belongNum: ''
                        },
                    ]
            }
        },
    }
};
</script>
<style scoped lang='scss'>
.pw40 {
  width: 45%;
}
.imgbox {
  border: 1px solid #ebeef5;
  border-right: none;
  flex: 1;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  img {
    width: 200px;
    height: 200px;
  }
}
</style>